<template>
  <view class="circle-countdown-wrapper">
    <!-- 画布元素 -->
    <canvas
      canvas-id="countdownCanvas"
      class="circle-countdown"
      :style="{ width: '320rpx', height: '320rpx' }"
    ></canvas>
    <!-- 开始倒计时按钮 -->
    <button @tap="startCountdown">开始倒计时</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      totalSeconds: 30, // 总倒计时秒数
      countdown: 30, // 当前倒计时秒数
      timer: null, // 定时器 ID
      canvasWidth: 160, // 画布宽度
      canvasHeight: 160, // 画布高度
      radius: 70, // 圆形半径
      circumference: 0, // 圆形周长
      dashoffset: 0, // 进度条偏移量
      ctx: null, // 画布上下文
      isAnimating: false // 动画状态标志
    };
  },
  onReady() {
    // 获取画布上下文
    this.ctx = uni.createCanvasContext('countdownCanvas', this);
    // 计算圆形周长
    this.circumference = 2 * Math.PI * this.radius;
    this.dashoffset = this.circumference;
    // 绘制初始状态的圆形
    this.drawCircle();
  },
  methods: {
    startCountdown() {
      if (this.isAnimating) return; // 如果动画已经在运行，则直接返回
      this.isAnimating = true; // 标记动画开始
      this.countdown = this.totalSeconds;
      this.dashoffset = this.circumference;
      this.animate();
    },
    animate() {
      if (this.countdown <= 0) {
        this.stopCountdown(); // 倒计时结束
        return;
      }

      // 更新倒计时
      this.countdown--;
      const progress = this.countdown / this.totalSeconds;
      this.dashoffset = this.circumference * progress;

      // 绘制圆形
      this.drawCircle();

      // 继续倒计时
      this.timer = setTimeout(() => {
        this.animate();
      }, 1000);
    },
    stopCountdown() {
      clearTimeout(this.timer); // 清除定时器
      this.timer = null;
      this.isAnimating = false; // 标记动画结束
      uni.showToast({
        title: '倒计时结束！',
        icon: 'none'
      });
    },
    drawCircle() {
      if (!this.ctx) return;
      const ctx = this.ctx;
      const centerX = this.canvasWidth / 2;
      const centerY = this.canvasHeight / 2;

      // 清空画布
      ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);

      // 绘制橘黄色背景圆
      ctx.beginPath();
      ctx.arc(centerX, centerY, this.radius, 0, 2 * Math.PI);
      ctx.fillStyle = '#FFA500';
      ctx.fill();

      // 绘制背景圆
      ctx.beginPath();
      ctx.arc(centerX, centerY, this.radius, 0, 2 * Math.PI);
      ctx.strokeStyle = '#e0e0e0';
      ctx.lineWidth = 10;
      ctx.stroke();

      // 绘制进度圆
      ctx.beginPath();
      const startAngle = -Math.PI / 2;
      const endAngle = startAngle - 2 * Math.PI * (1 - this.dashoffset / this.circumference); // 逆时针方向
      ctx.arc(centerX, centerY, this.radius, startAngle, endAngle, true); // true 表示逆时针
      ctx.strokeStyle = this.getColor();
      ctx.lineWidth = 10;
      ctx.lineCap = 'round';
      ctx.stroke();

      // 绘制倒计时文本
      ctx.font = '20px Arial';
      ctx.fillStyle = 'white';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(this.countdown, centerX, centerY);

      // 绘制到画布
      ctx.draw(true); // 使用 true 表示保留上一次绘制的内容
    },
    getColor() {
      const ratio = this.countdown / this.totalSeconds;
      // if (ratio > 0.6) {
        return 'green';
      // } else if (ratio > 0.3) {
        // return 'orange';
      // }
      // return 'red';
    }
  }
};
</script>

<style scoped>
.circle-countdown-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}

.circle-countdown {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 20px;
}
</style>